<template>
  <BaseDialog
    :title="getTitle"
    :visible="visible"
    :auto-height="true"
    :width="480"
    confirm-text="确定"
    @open="handleOpen"
    @handle-confirm="handleCacheConfirm"
    @close="handleCacheClose"
  >
    <el-form
      ref="formEl"
      class="w-full"
      label-position="top"
      label-width="70px"
      :rules="rules"
      :model="formState"
    >
      <el-form-item label="节点名称" prop="name">
        <el-input
          v-model="formState.name"
          maxlength="30"
          show-word-limit
          type="text"
          placeholder="请输入分组名称"
        >
          <template #append>
            <span class="text-[#1562FC]" @click="handleRandomName">随机</span>
          </template></el-input
        >
      </el-form-item>
      <el-form-item label="所属分组" prop="group_id">
        <el-select
          v-model="formState.group_id"
          class="w-full"
          filterable
          placeholder="全部分组"
        >
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :label="item.name"
            :value="(item.id  as any)"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>
<script lang="ts" setup>
import type { NodeGroupData } from '@/apis/model/node'
import BaseDialog from '@/components/base-dialog'
import { randomRange } from '@/utils'

import type { FormRules, FormInstance } from 'element-plus'
import { ElNotification } from 'element-plus'
const emit = defineEmits(['refresh-table', 'closeDialog'])
const formEl = ref<FormInstance>()
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
  group_id: [{ required: true, message: '请选择所属分组', trigger: 'change' }]
})
interface IRecord {
  id: string
  name: string
  group_id: string
}
interface IProps {
  visible: boolean
  record?: IRecord | null
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  record: null
})
interface IIFormState {
  id?: string
  name: string
  group_id: string
  next_tcc_status: number
}
const formState = reactive<IIFormState>({
  name: '',
  group_id: '',
  next_tcc_status: 1
})
const getTitle = computed(() => {
  return !props?.record?.id ? '新增分组' : '编辑分组'
})

const groupList = ref<NodeGroupData[]>()
const handleRandomName = () => {
  formState.name = '节点' + randomRange(6)
}
const getGroupList = () => {
  node_group({})
    .then(res => {
      groupList.value = res?.list ?? []
      groupList?.value?.unshift({ id: 0, name: '全部分组' })
    })
    .finally(() => {})
}
//弹窗打开
const handleOpen = () => {
  getGroupList()
  Object.assign(formState, props.record)
}
// 弹窗确认
const handleCacheConfirm = () => {
  formEl.value?.validate().then(() => {
    const params = { ...formState }
    // params.id
    update_node({ ...params })
      .then(() => {
        ElNotification.success({
          title: '成功',
          message: '编辑成功'
        })
      })
      .finally(() => {
        handleCacheClose()
      })
  })
}
// 弹窗关闭
const handleCacheClose = () => {
  emit('closeDialog')
  emit('refresh-table')
  formEl.value?.resetFields()
}
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  padding: 0 11px;
  cursor: pointer;
  color: #1562fc;
  background: #eaf1ff;
}
:deep(.el-input__inner) {
  color: #000;
}
</style>
